<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>custom validator error message example</title>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <script src="../../../dist/vue-validator.min.js"></script>
    <style>
      input.invalid { border-color: red; }
      .errors { color: red; }
    </style>
  </head>
  <body>
    <div id="app">
      <form novalidate>
        <div class="username">
          <label>username:</label>
          <validity field="username" :validators="['required']">
            <input type="text" name="username" @input="handleUsername">
          </validity>
        </div>
        <div class="address">
          <label>email-address:</label>
          <validity field="address" :validators="['email']">
            <input type="text" name="address" @input="handleAddress">
          </validity>
        </div>
        <div class="age">
          <label>age:</label>
          <validity field="age" :validators="['numeric']">
            <input type="text" name="age" @input="handleAge">
          </validity>
        </div>
        <div class="site">
          <label>site:</label>
          <validity field="site" :validators="['url']">
            <input type="text" name="site" @input="handleSite">
          </validity>
        </div>
        <div class="errors">
          <p class="username" v-if="results.username.required">{{results.username.required}}</p>
          <p class="address" v-if="results.address.email">{{results.address.email}}</p>
          <p class="age" v-if="results.age.numeric">{{results.age.numeric}}</p>
          <p class="site" v-if="results.site.url">{{results.site.url}}</p>
        </div>
        <input type="submit" value="send" v-if="valid">
      </form>
    </div>
    <script>
      // `email` custom validator global registration
      Vue.validator('email', {
        message: 'invalid email address', // error message with plain string
        check: function (val) { // define validator
          return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
        }
      })

      // build-in `required` validator customization
      Vue.validator('required', {
        message: function (field) { // error message with function
          return 'required "' + field + '" field'
        },
        check: Vue.validator('required') // re-use validator logic
      })

      new Vue({
        data: {
          results: {
            username: {},
            address: {},
            age: {},
            site: {}
          }
        },
        computed: {
          valid: function () {
            var results = this.results
            var fields = Object.keys(results)
            var ret = true
            for (var i = 0; i < fields.length; i++) {
              var field = fields[i]
              if (results[field].invalid) {
                ret = false
                break
              }
            }
            return ret
          }
        },
        validators: {
          numeric: { // `numeric` custom validator local registration
            message: 'invalid numeric value',
            check: function (val) {
              return /^[-+]?[0-9]+$/.test(val)
            }
          },
          url: { // `url` custom validator local registration
            message: function (field) {
              return 'invalid "' + field + '" url format field'
            },
            check: function (val) {
              return /^(http\:\/\/|https\:\/\/)(.{4,})$/.test(val)
            }
          }
        },
        methods: {
          handleUsername: function (e) {
            this.handleValidate(e.target.$validity, 'username')
          },
          handleAddress: function (e) {
            this.handleValidate(e.target.$validity, 'address')
          },
          handleAge: function (e) {
            this.handleValidate(e.target.$validity, 'age')
          },
          handleSite: function (e) {
            this.handleValidate(e.target.$validity, 'site')
          },
          handleValidate: function ($validity, field) {
            var self = this
            $validity.validate(function () {
              var result = $validity.result
              self.results[field] = result
            })
          }
        }
      }).$mount('#app')
    </script>
  </body>
</html>
